<template>
	<view v-if="info">
		<view class="page-foot">
			<view class="flex-box actions_box tc fs30 col-normal">
				<view @tap.stop.tap="jumpToChat" :data-uid="info.user_id" class="flex-grow-1">在线聊</view>
				<view @tap.stop.prevent="bindPhoneCall" :data-tel="info.mobile" class="flex-grow-1">打电话</view>
				<view @tap.stop.tap="jumpToFollow" class="flex-grow-1">写跟进</view>
			</view>
		</view>
		<view class="container">
			<view class="clientsitem flex-box">
				<image :src="info.user.avatar" mode="aspectFill" class="icon_avatar"></image>
				<view class="flex-grow-1 flex-box flex-between">
					<view class="fs34 pb15">{{ info.user.nickname }}</view>
					<text class="fs24 col89">{{info.followtime_text}}</text>
				</view>
			</view>
			<view class="fs34 fwb col10 pb20">基础信息</view>
			<view v-if="info.userprofile.assets_condition" class="fs30 col89 pb15">资产情况：<text class="col10">{{info.userprofile.assets_condition}}</text></view>
			<view class="fs30 col89 pb15">客源委托：<text class="col10">{{info.distributetime_text}} | {{info.type_text}}</text></view>
			<view class="fs30 col89 pb40">客源编号：<text class="col10">{{info.user_id}}</text></view>
			<view class="fs34 fwb col10 pb20 line">需求信息</view>
			<view class="fs30 col89 pb15">进度：<text class="col10">{{info.house_state_text}} | {{info.updatetime_text}}</text></view>
			<view class="fs30 col89 pb15">条件：<text class="col10">{{info.total_price_text||'总价不限'}}</text></view>
			<view class="fs30 col89 pb15">房源：<text class="col10"><text v-if="info.max_space">{{info.min_space}}-{{info.max_space}}㎡</text><text v-else>面积不限</text> | {{info.house_search_roomnum_ids_text||'户型不限'}}</text></view>
			<view class="fs30 col89 pb40">位置：<text class="col10">{{info.city}}</text></view>
			<view class="pb20 line fs30 col-normal flex-box flex-between">
				<view class="fs34 fwb col10 ">跟进记录</view>
				<view @tap="jumpToAnalies">客户分析</view>
			</view>
			<view class="dynamiclist pb40">
				<template v-if="nowList.total > 0">
					<template v-for="(item, index) in nowList.data">
						<view class="dynamicitem">
							<view class="flex-box title">
								<view class="new">{{ item.house_state_text }}</view>
								<view class="col89">{{ item.createtime_text }}</view>
							</view>
							<view class="dyna1 fwb">{{ item.name }}</view>
							<view v-if="item.discription" class="dyna2">{{ item.discription }}</view>
							<view v-if="item.dissatisfaction" class="dyna3">{{ item.dissatisfaction }}</view>
							<view class="flex-box flex-wrap" v-if="item.images">
								<image @tap="previewImg" :data-url="img" v-for="img in item.images_arr" :src="img" class="dy_img" mode="aspectFill" ></image>
							</view>
						</view>
					</template>
					<u-loadmore v-if="nowList.data.length>9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
						nomore-text="没有更多了" />
				</template>
				<template v-else>
					<u-empty mode="data" text="暂无数据" textSize="24" icon="/static/images/none-data.png">
					</u-empty>
				</template>
			</view>

		</view>
	</view>
</template>

<script>
	// pages/my_clients_detail/my_clients_detail.js
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {

		data() {
			return {
				id: 0,
				info: null,
				// 列表
				nowList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data: []
				},
				loadStatus: 'loadmore', //加载状态
				all_img_arr: [],
			};
		},
		onLoad: function(options) {
			this.id = options.id || 0;
			this.initData();

		},
		onPullDownRefresh: function() {
			uni.showNavigationBarLoading(); //在标题栏中显示加载
			var that = this; //模拟加载
			setTimeout(function() {
				that.initData();
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1500);
		},
		onReachBottom: function() {
			if (this.nowList.current_page >= this.nowList.last_page) {
				this.loadStatus = 'nomore';
				return false;
			} else {
				this.getnowList();
			}
		},
		methods: {
			jumpToAnalies(){
				uni.navigateTo({
					url:'/pages/member/my_clients_analies/my_clients_analies?id=' + this.id
				})
			},
			jumpToFollow(){
				var can_house_state_arr=this.info.can_house_state_arr;
				uni.navigateTo({
					url:'/pages/member/follow_up/follow_up?id=' + this.id+"&can_house_state_arr="+JSON.stringify(can_house_state_arr)
				})
			},
			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function (ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			// 图片预览
			previewImg(e) {
				uni.previewImage({
					current: e.currentTarget.dataset.url,
					// 当前显示图片的http链接
					urls: this.all_img_arr // 需要预览的图片http链接列表
				});
			},

			// 获取列表信息
			getnowList: function() {
				var that = this;
				var json = {
					id: this.id
				};
				json.page = Number(that.nowList.current_page) + 1;

				if (json.page > 1 && that.nowList.current_page >= that.nowList.last_page) {
					functions.toast('已加载到底部了');
					this.loadStatus = 'nomore';
					return false;
				}
				this.loadStatus = 'loading';
				functions.getAjaxList(that, '/api/xiluhouse/appoint/follow_log_list', json, function(res) {
					var nowList = res.data;

					if (json.page > 1) {
						var now_nowList_data = that.nowList.data || [];
						var now_nowList_data = now_nowList_data.concat(nowList.data);
						nowList.data = now_nowList_data;
					}
					var now_data = nowList.data;
					var all_img_arr = [];
					now_data.forEach((element) => {
						var images_arr = element.images_arr;
						images_arr.forEach((element2) => {
							all_img_arr.push(element2);
						});
					});
					that.all_img_arr=all_img_arr;
					that.nowList = nowList;

				});
			},

			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/my_user_detail', {
						id: this.id
					},
					function(res) {
						that.info = res.data;

					}
				);
				that.nowList.current_page = 0

				that.getnowList();
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "/static/css/old_project.css";

	.bottomcanvas {
		padding-bottom: 100rpx;
	}

	.page-foot {
		box-shadow: 0px 4rpx 30rpx 0px rgba(184, 189, 202, 0.3);
	}

	.actions_box {
		height: 100rpx;

		view {
			border-right: 1rpx solid #F4F3F3;

			&:last-child {
				border: none;
			}
		}
	}

	.tabel {
		padding: 20rpx 0 40rpx;

		.item {
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 10rpx;

			view {
				flex: 1;
			}


			&:nth-of-type(2n-1) {
				background: #F6F7FA;
			}
		}
	}

	.num_box .active {
		color: var(--normal);
	}

	.navbox {
		height: 110rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #F4F3F3;
		padding-bottom: 30rpx;
	}

	.navitem {
		font-size: 34rpx;
		color: #101010;
		padding: 0 50rpx;
	}

	.navitem.active {
		position: relative;
		font-weight: bold;
	}

	.navitem.active::after {
		content: "";
		display: block;
		width: 30rpx;
		height: 8rpx;
		background: #0091FF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(3, 103, 179, 0.3);
		border-radius: 7rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.line {
		width: 670rpx;
		height: auto;
		border-top: 1rpx solid #F4F3F3;
		padding-top: 40rpx;
	}

	.container {
		padding: 0 30rpx;
	}

	.clientsitem {
		padding: 30rpx 0;
	}

	.icon_avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.icon_tel3 {
		width: 25rpx;
		height: 25rpx;
		margin-left: 17rpx;
	}

	.budget {
		height: 50rpx;
		line-height: 50rpx;
	}

	.titlebox {
		padding: 0 0 14rpx;
	}

	.status {
		width: 120rpx;
		height: 50rpx;
		border-radius: 5rpx;
		background: #ff7b40;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
	}


	.dynamicitem {
		position: relative;
		padding: 36rpx 0 4rpx 30rpx;
	}

	.dynamicitem::after {
		content: '';
		display: block;
		height: 100%;
		width: 2rpx;
		background: #f4f3f3;
		position: absolute;
		left: 0;
		top: 54rpx;
		z-index: 1;
	}

	.dynamicitem::before {
		content: '';
		display: block;
		width: 18rpx;
		height: 18rpx;
		background: linear-gradient(180deg, #00c4ff, #0091ff);
		position: absolute;
		left: -8rpx;
		top: 46rpx;
		border-radius: 50%;
		z-index: 2;
	}

	.dynamicitem .new {
		background: #0091ff;
		width: 80rpx;
		height: 41rpx;
		border-radius: 10rpx 0 10rpx 0;
		line-height: 41rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.dynamicitem .dyna1 {
		padding: 22rpx 0 11rpx;
		font-size: 32rpx;
	}

	.dynamicitem .dyna2 {
		line-height: 43rpx;
		letter-spacing: 0.336rpx;
		min-height: 86rpx;
	}

	.dynamicitem .dyna3 {
		line-height: 43rpx;
		letter-spacing: 0.336rpx;
		color: #ff5232;
		padding-bottom: 10rpx;
	}
	.dynamicitem .dy_img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 6rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
